<template>
  <div class="wrapper">
    <dx-header-bar title="超标业务专题"></dx-header-bar>
    <dx-search-bar placeholder="搜索" @click.native="showSearchPopup"></dx-search-bar>
    <dx-search-excessive
      ref="searchPopup"
      :defaultValue="cityName"
      @on-search="search"
    ></dx-search-excessive>
    <md-scroll-view
      ref="scrollView"
      class="scroll-view"
      :scrolling-x="false"
      @refreshing="$_onRefresh"
      @endReached="$_onEndReached"
    >
      <md-scroll-view-refresh
        slot="refresh"
        slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
        :scroll-top="scrollTop"
        :is-refreshing="isRefreshing"
        :is-refresh-active="isRefreshActive"
      ></md-scroll-view-refresh>
      <md-field
        class="scroll-view-item"
        v-for="(item,index) in dataList"
        :key="index"
      >
        <div slot="header" class="view-item-header">
          <span class="index">{{index+1}}.</span>
          <span class="title">{{item.PRODUCT_NO}}（{{item.BUSINESS_SERVICE_LEVEL}}）</span>
        </div>
        <md-detail-item title="客户名称：">
          <div class="detail-item-content">{{item.CUSTOMER_NAME}}</div>
        </md-detail-item>
        <md-detail-item title="业务保障等级：">
          <div class="detail-item-content">{{item.BUSINESS_SERVICE_LEVEL}}</div>
        </md-detail-item>
        <md-detail-item title="业务带宽：">
          <div class="detail-item-content">{{item.BUSINESS_RATE}}</div>
        </md-detail-item>
        <md-detail-item title="接入地址：">
          <div class="detail-item-content">{{item.BUSINESS_ADDRESS}}</div>
        </md-detail-item>
        <md-detail-item title="客户IP地址：">
          <div class="detail-item-content">{{item.CUSTOMER_IP_ADDRESS}}</div>
        </md-detail-item>
        <md-detail-item title="累计超标次数：">
          <div class="detail-item-content">{{item.SUMNUM}}</div>
        </md-detail-item>
        <md-detail-item title="上行峰值带宽利用率：">
          <div class="detail-item-content">{{item.BIGTU}}</div>
        </md-detail-item>
        <md-detail-item title="下行峰值带宽利用率：">
          <div class="detail-item-content">{{item.BIGRU}}</div>
        </md-detail-item>
      </md-field>
      <md-scroll-view-more
        slot="more"
        :is-finished="isFinished"
        :finished-text="finishedText"
      >
      </md-scroll-view-more>
    </md-scroll-view>
  </div>
</template>

<script>
import { getExcessiveLine } from '@/api/resource';
import { DxHeaderBar, DxSearchBar, DxSearchExcessive } from '@/components';
import { ScrollView, ScrollViewRefresh, ScrollViewMore, Field, DetailItem } from 'mand-mobile';


export default {
  name: 'detials',
  components: {
    DxHeaderBar,
    DxSearchBar,
    DxSearchExcessive,
    [ScrollView.name]: ScrollView,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [ScrollViewMore.name]: ScrollViewMore,
    [Field.name]: Field,
    [DetailItem.name]: DetailItem
  },
  data() {
    return {
      isFinished: false,
      cityName: this.$route.query.cityName,
      lineType: this.$route.query.lineType,
      districtName: '',
      page: 1,
      limit: 10,
      dataList: []
    };
  },
  computed: {
    finishedText() {
      return this.dataList.length ? '已全部加载' : '没有数据';
    }
  },
  mounted() {
    this.$refs.scrollView.triggerRefresh();
  },
  methods: {
    showSearchPopup() {
      this.$refs.searchPopup.showPopup();
    },
    $_onRefresh() {
      this.isFinished = false;
      this.page = 1;
      this.loadExcessiveLine('refresh');
    },
    $_onEndReached() {
      if (this.isFinished) {
        return;
      }
      this.page += 1;
      this.loadExcessiveLine();
    },
    $_onFinished(data, type, isFinished) {
      this.isFinished = isFinished;
      if (type === 'refresh') {
        this.dataList = data;
        this.$refs.scrollView.finishRefresh();
      } else {
        this.dataList = this.dataList.concat(data);
        this.$refs.scrollView.finishLoadMore();
      }
    },
    search(form) {
      this.cityName = form.cityName;
      this.districtName = form.districtName;
      this.page = 1;
      this.$refs.scrollView.triggerRefresh();
    },
    loadExcessiveLine(type) {
      const params = {};
      params.page = this.page;
      params.cityName = this.cityName;
      params.lineType = this.lineType;
      params.districtName = this.districtName;
      console.log(params);
      getExcessiveLine(params).then(result => {
        const data = result.data.datas;
        if (data instanceof Array && data.length) {
          this.$_onFinished(data, type, this.page * this.limit >= result.data.count);
        } else {
          this.$_onFinished([], type, true);
        }
      }).catch(error => {
        this.$_onFinished([], type, true);
        console.log(error);
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
  .wrapper
    height: 100%
    display: flex
    flex-direction: column

  .scroll-view
    flex: 1

  .scroll-view-item
    margin-bottom: 20px
    padding: 20px

  .view-item-header
    color: theme-color
    font-size: 32px
    font-weight: bold

    .index
      margin-right: 20px
      color: #333

  .detail-item-content
    flex: 1
</style>
